<template>
    <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="6em"
    >
        <el-row type="flex" :gutter="10">
            <el-col :span="24">
                <el-form-item label="分类图标" prop="img">
                    <el-upload-image v-model="formData.img"></el-upload-image>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="分类名称" prop="name">
                    <el-input
                        v-model="formData.name"
                        placeholder="请输入分类名称"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="排序" prop="sort">
                    <el-input
                        v-model="formData.sort"
                        placeholder="请输入排序号"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="启用状态" prop="status">
                    <el-switch
                        v-model="formData.status"
                        :active-value="1"
                        :inactive-value="0"
                    ></el-switch>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-button type="primary" icon="el-icon-check" @click="onConfirm"
                >确认</el-button
            >
            <el-button type="default" icon="el-icon-close" @click="onCancel"
                >取消</el-button
            >
        </el-row>
    </el-form>
</template>

<script>
import { post } from "@/assets/js/http.js";

export default {
    name: "article-type-add",
    components: {
        "el-upload-image": () => import("@/components/el-upload-image.vue")
    },
    data() {
        return {
            formData: {
                img: [],
                name: "",
                sort: "",
                status: 1
            },
            formRules: {
                name: [
                    {
                        required: true,
                        message: "此项为必填项"
                    }
                ],
                sort: [
                    {
                        required: true,
                        message: "此项为必填项"
                    },
                    {
                        pattern: /^[1-9]\d*$/,
                        message: "只能输入正整数"
                    }
                ],
                status: {
                    required: true,
                    message: "此项为必填项"
                }
            }
        };
    },
    methods: {
        onConfirm() {
            this.$refs.formRef.validate(async isValid => {
                if (isValid) {
                    const formData = JSON.parse(JSON.stringify(this.formData));
                    if (formData.img.length > 0) {
						console.log(formData.img,'formData.img')
                        formData.img =
                            "//zdcloud.zxkjnc.com" +
                            formData.img[0].url;
                    } else {
                        formData.img = "";
                    }
                    await post({
                        url: "/admin/wiki.newsCate/add",
                        data: formData,
                        loading: true,
                        successTip: true
                    });
                    this.$emit("update");
                    this.$parent.$emit("update:visible", false);
                    this.$refs.formRef.resetFields();
                }
            });
        },
        onCancel() {
            this.$parent.$emit("update:visible", false);
            this.$refs.formRef.resetFields();
        }
    }
};
</script>
